 /*
 * @description: 新建装修首页
 * @Author: along
 * @Date: 2020-06-11
 * @Last Modified by: along
 * @Last Modified time: 2020-06-11
 */
<template>
    <el-dialog
        title="新建首页"
        :visible.sync="dialogVisible"
        width="640px"
        :close-on-click-modal="false"
        class="__create"
    >
        <div class="__wrap">
            <div class="__items">
                <p class="__items_title">
                    首页名称：
                </p>
                <el-input
                    type="text"
                    placeholder="请输入首页名称"
                    v-model="template_name"
                    maxlength="12"
                    show-word-limit
                    size="medium"
                />
            </div>
            <div class="__items">
                <p class="__items_title">
                    展示时间：
                </p>
                <el-date-picker
                    v-model="template_time"
                    type="datetimerange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="['00:00:00', '23:59:59']"
                    :disabled="texmlate_lang_time"
                    size="medium"
                />
                <el-checkbox
                    v-model="texmlate_lang_time"
                    :style="{marginLeft: '12px'}"
                    :disabled="template_time === null ? false : (!!template_time.length ? true : false)"
                >
                    长期有效
                </el-checkbox>
            </div>
        </div>
        <div class="__create_footer">
            <el-button
                @click="dialogVisible = false"
                type="default"
                size="medium"
                :style="{width: '120px', marginRight: '32px'}"
            >
                取 消
            </el-button>
            <el-button
                type="primary"
                size="medium"
                :style="{width: '120px'}"
                :disabled="!checkSubmit"
                @click="handleConfirm()"
            >
                确 定
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: 'ActiveCreatepageDialog',
    data() {
        return {
            TYPE: '',//add edit
            row: {},
            dialogVisible: false,
            template_name: '',//首页名称
            template_time: [],//展示时间
            texmlate_lang_time: false//是否长期有效
        };
    },
    computed: {
        // 是否填写信息
        checkSubmit () {
            let is_result = false;

            return this.texmlate_lang_time ? (this.template_name ? true : false) : (this.template_name ? (this.template_time === null ? false : (this.template_time.length ? true : false)) : false);
        }
    },
    methods: {
        // 显示弹窗
        showDialog (type, row = {}) {
            this.TYPE = type;
            this.row = {
                ...row
            };

            if(type == 'add') {
                this.template_name = '';
                this.template_time = [];
                this.texmlate_lang_time = false;
            } else {
                this.template_name = row.title;
                if(row.start_time == -1 && row.end_time == -1) {
                    this.texmlate_lang_time = true;
                    this.template_time = [];
                } else {
                    this.template_time = [
                        row.start_time * 1000,
                        row.end_time * 1000
                    ];
                    this.texmlate_lang_time = false;
                }
            }
            this.dialogVisible = true;
        },

        // 关闭弹窗
        closeDialog () {
            this.dialogVisible = false;
        },

        // 确定创建
        handleConfirm () {
            this.closeDialog();
            this.$emit('create', {
                type: this.TYPE,
                page_no: this.TYPE == 'edit' ? this.row.page_no : '',
                template_name: this.template_name,
                template_time: this.template_time,
                texmlate_lang_time: this.texmlate_lang_time
            });
        }
    },
};
</script>

<style lang="less">
.__create {
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .el-dialog__body {
        padding-left: 60px;
        padding-right: 60px;
    }
    .__create_footer {
        display: flex;
        justify-content: center;
    }
    .__wrap {
        display: flex;
        flex-direction: column;
        .__items {
            display: flex;
            align-items: center;
            margin-bottom: 24px;
            .__items_title {
                white-space: nowrap;
            }
        }
    }
}
</style>